<template>
    <div class="wrapper">
        <img src="../assets/castle.svg" alt="" class="logo">
        <h2>Musikschloss</h2>
        <svg t="1648019234906"
             class="icon"
             viewBox="0 0 1024 1024"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2876"
             width="32"
             @click="loginDialog"
             height="32"><path d="M259.556 366.595c0-154.452 103.075-255.842 255.45-260.006-0.555-0.052-1.109-0.104-1.66-0.15 1.919 0 3.825 0.028 5.729 0.058 1.904-0.03 3.81-0.058 5.729-0.058-0.551 0.046-1.106 0.098-1.66 0.15 152.375 4.164 255.45 105.554 255.45 260.006 0 111.801-77.827 208.583-171.406 255.483 0.138 0.031 0.275 0.063 0.413 0.093l28.168-13.638c92.177-44.628 151.737-139.595 151.737-241.939 0-148.13-120.513-268.644-268.643-268.644S250.219 218.465 250.219 366.595c0 102.332 56.885 194.413 148.456 240.307l30.905 15.489c0.461-0.104 0.92-0.21 1.381-0.313-93.578-46.9-171.405-143.681-171.405-255.483z" fill="#F9F455" p-id="2877"></path><path d="M567.405 630.852c96.772-78.946 181.481-151.068 181.481-264.257 0-154.52-137.314-248.557-229.811-259.571-92.497 11.014-229.811 105.051-229.811 259.571 0 113.189 84.709 185.311 181.481 264.257-135.133 40.396-315.64 166.903-315.64 242.57l-47.484-15.8c0-52.017 66.279-123.395 164.739-176.417-33.887 16.416-65.265 35.992-92.676 58.05-49.989 40.227-81.126 85.359-81.398 117.934 1.205 2.078 15.555 21.744 130.51 37.058 76.419 10.181 177.474 15.787 284.549 15.787s208.13-5.607 284.549-15.787c114.955-15.314 129.304-34.98 130.51-37.058a53.161 53.161 0 0 0-0.082-2.308l-45.278 13.447c0.001-75.665-180.506-197.08-315.639-237.476z" fill="#F9F455" p-id="2878"></path><path d="M870.7 714.757c-50.888-41.544-115.007-75.104-183.718-96.525 34.645-23.171 64.273-53.335 86.944-88.767 31.096-48.599 47.532-104.919 47.532-162.87 0-40.842-8.003-80.473-23.787-117.789-15.241-36.035-37.057-68.394-64.842-96.178s-60.143-49.6-96.178-64.842C599.336 72.003 559.705 64 518.863 64s-80.473 8.003-117.789 23.787c-36.035 15.241-68.394 37.057-96.178 64.842-27.784 27.784-49.6 60.143-64.842 96.178-15.784 37.316-23.787 76.946-23.787 117.789 0 57.225 16.057 112.944 46.436 161.133a303.772 303.772 0 0 0 84.645 88.179c-70.459 20.935-136.425 54.632-188.948 96.898-59.781 48.106-94.067 100.89-94.067 144.818 0 28.579 36.319 41.913 48.254 46.294 23.919 8.781 58.013 16.369 101.334 22.554 79.127 11.296 185.465 17.518 299.424 17.518s220.297-6.221 299.424-17.518c43.322-6.185 77.416-13.773 101.334-22.554 11.935-4.381 48.254-17.714 48.254-46.294 0.001-43.239-33.407-95.311-91.657-142.867z m57.705 142.434c-1.205 2.078-15.555 21.744-130.51 37.058-76.419 10.181-177.474 15.787-284.549 15.787s-208.13-5.607-284.549-15.787c-114.954-15.314-129.304-34.98-130.51-37.058 0.273-32.575 31.41-77.708 81.398-117.934 27.411-22.058 58.789-41.635 92.676-58.05 46.44-25.008 100.038-45.932 157.219-58.815l-30.905-15.489c-91.571-45.894-148.456-137.974-148.456-240.307 0-148.13 120.513-268.644 268.644-268.644s268.643 120.513 268.643 268.644c0 102.344-59.561 197.31-151.737 241.939l-28.168 13.638c178.866 39.981 322.928 155.366 322.928 232.056l-2.206 0.655c0.039 0.774 0.075 1.547 0.082 2.307z" fill="" p-id="2879"></path><path d="M107.622 857.623l47.484 15.8c0-75.667 180.507-202.175 315.64-242.57-96.772-78.946-181.481-151.068-181.481-264.257 0-154.52 137.314-248.557 229.811-259.571a165.788 165.788 0 0 0-4.069-0.435c-152.375 4.164-255.45 105.554-255.45 260.006 0 111.801 77.827 208.583 171.406 255.483-0.461 0.103-0.921 0.209-1.381 0.313-57.181 12.883-110.78 33.806-157.219 58.815-98.462 53.021-164.741 124.399-164.741 176.416zM519.075 106.498c1.361 0.022 2.716 0.055 4.069 0.092 0.555-0.052 1.109-0.104 1.66-0.15-1.919 0-3.825 0.028-5.729 0.058z" fill="#FFFFFF" p-id="2880"></path><path d="M607.601 622.172c-0.138-0.031-0.275-0.063-0.413-0.093 93.579-46.9 171.406-143.682 171.406-255.483 0-154.452-103.075-255.842-255.45-260.006-1.353-0.037-2.708-0.07-4.069-0.092-1.904-0.03-3.81-0.058-5.729-0.058a161.033 161.033 0 0 1 5.729 0.585c92.497 11.014 229.811 105.051 229.811 259.571 0 113.189-84.709 185.311-181.481 264.257 135.133 40.396 315.639 161.811 315.639 237.477l45.278-13.447 2.206-0.655c0-76.69-144.062-192.075-322.927-232.056z" fill="#FF9702" p-id="2881"></path></svg>
    </div>
</template>

<script>
  import "../assets/castle.svg"
  import { mapMutations } from "vuex"
  export default {
    name: "m-header",
    methods:{
      ...mapMutations(['setDialogVisible']),
      loginDialog(){
        this.setDialogVisible(true)
      }
    }
  };
</script>
<style scoped lang="scss">
    @import "../common/variable";
    .wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $header-fontsize-l;
        .logo{
            width: 38rem;
            height: 38rem;
        }
        h2{
            line-height: $header-fontsize-l;
        }
    }
</style>